<template>
  <div v-if="isShow" class="wrapper">
    <el-card style="margin-bottom:10px;">
      <div>
        <label class="el-form-item__label" style="width: 80px;">数据类型</label>
        <el-select v-model="datatype" placeholder="请选择" @change="handleChanges">
          <el-option label="接口数据" :value="1"></el-option>
          <el-option label="自定数据" :value="2">
          </el-option>
        </el-select>
      </div>
    </el-card>

    <div v-if="datatype==1">
      <xdh-form size="small" :model="dataModel" :footer="false" label-width="80px" @change="handleChange" :edits="true">
        <xdh-form-item v-for="(item, index) in data_fields" :key="index" v-bind="item" />
      </xdh-form>
    </div>

    <el-card v-if="dialogVisible && datatype==2" class="eventEditor">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="0">
          <div slot="title">
            {{ editOption?"编辑":"添加" }}选项
          </div>
          <xdh-form ref="form" class="form" footer-align="right" inline-size="medium" label-width="80px" footer-size="large" :model="editOption" footer-border @submit="handleSubmit" :edits="true">
            <xdh-form-item v-for="item in fields" :key="item.prop" v-bind="item" />
          </xdh-form>
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <el-table ref="filterTable" border :data="options" style="width: 100%" :header-cell-style="{'text-align':'center'}" v-if="datatype==2">
      <el-table-column label="id" prop="id" align="center" width="60" />

      <el-table-column label="pid" align="center" width="60">
        <template slot-scope="{row}">
          {{ row.parentId }}
        </template>
      </el-table-column>

      <el-table-column label="标签" align="center" width="80">
        <template slot-scope="{row}">
          {{ row.label }}
        </template>
      </el-table-column>

      <el-table-column label="值" align="center" width="60">
        <template slot-scope="{row}">
          {{ row.value }}
        </template>
      </el-table-column>

      <el-table-column label="value" align="center" width="60">
        <template slot="header" slot-scope="scope">
          <el-button size="mini" icon="el-icon-plus" type="text" @click="handleAdd" />
        </template>
        <template slot-scope="{row}">
          <el-button size="mini" icon="el-icon-edit" type="text" @click="handleEdit(row)" />
          <el-button size="mini" icon="el-icon-delete" type="text" @click="handleRemove(row)" />
        </template>
      </el-table-column>

    </el-table>
  </div>
  <div v-else class="wrapper">
    该组件无选项数据
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus" scoped type="text/stylus">
.dataEditor {
  height: 300px;
  width: 100%;
}
</style>

<script type="text/ecmascript-6">
/**
   * 数据编辑器，
   * 后续扩展接口访问支持
   */
import { mapGetters, mapState } from 'vuex'
import BaseComponent from '@/widgets/extend/BaseComponent'
import XdhForm from '@/widgets/xdh-form'
import XdhFormItem from '@/widgets/xdh-form/xdh-form-item'

let timer
export default {
  name: 'DataEditor',
  components: { XdhForm, XdhFormItem },
  mixins: [BaseComponent],
  props: {
    content: {
      type: [String, Array, Object]
    },
    /**
       * 支持 空，array，object
       */
    type: {
      type: String
    }
  },
  data: function () {
    return {
      inContent: '',
      activeNames: '0',
      dialogVisible: false,
      editOption: null,
      datatype: 1,
      fields: [
        {
          type: 'input',
          prop: 'id',
          label: 'id'
        },
        {
          type: 'input',
          prop: 'parentId',
          label: 'parentId'
        },
        {
          type: 'input',
          prop: 'label',
          label: 'label',
          rules: [{
            required: true
          }]
        },
        {
          type: 'input',
          prop: 'value',
          label: 'value',
          rules: [{
            required: true
          }]
        }
      ]
    }
  },
  computed: {
    ...mapState(['editField']),
    ...mapGetters(['dataFields', 'dataModel']),
    isShow() {
      return !!this.$store.state.editField.options;// || !!this.$store.state.editTableField
    },
    options: {
      get() {
        return this.$store.state.editField.options || []
      },
      set(options) {
        const newField = JSON.parse(JSON.stringify({
          ...this.$store.state.editField,
          options: options
        }))
        this.$store.commit('updateField', newField)
      }
    },
    data_fields() {
        var istree = this.type == 'tree' || this.type == 'cascader' || this.type == 'checkTree';
        return this.dataFields.filter(n => istree ? !n.helper:n)
      }
  },
  watch: {
    content: {
      handler(newVal) {
        if (!this.isEditorChange) {
          if (this.type) {
            try {
              this.inContent = JSON.stringify(this.content, null, 2)
            } catch (error) {
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted: function () {
    if (this.type) {
      this.inContent = JSON.stringify(this.content, null, 2)
    }
  },
  methods: {
    handleAdd() {
      this.editOption = null
      this.dialogVisible = true
    },
    handleSubmit(model) {
      const options = [...this.options]
      if (this.editOption) {
        const index = options.findIndex(item => item === this.editOption)
        options.splice(index, 1, model)
      } else {
        options.push(model)
      }
      this.options = options
      this.$refs.form.reset()
      this.dialogVisible = false
      this.editOption = null
    },
    handleRemove(model) {
      this.$confirm('确认删除该规则', '提示').then(r => {
        this.options = this.options.filter(n => n !== model)
      })
    },
    handleEdit(model) {
      this.editOption = model
      this.dialogVisible = true
    },

    handleChanges(model) {
      var models;
      if(model == 2) {
        models ={
          dictattr:"",
          dictlabel:"",
          dictvalue:"",
          dictapi:""
        }
      }

      const newField = JSON.parse(JSON.stringify({
        ...this.editField,
        datatype:this.datatype,
        ...models
      }))
      console.log(newField, 456789)
      this.$store.commit('updateField', newField)
    },
    handleChange(model) {
      const newField = JSON.parse(JSON.stringify({
        ...this.editField,
        datatype:this.datatype,
        ...model
      }))
      console.log(newField, 456789)
      this.$store.commit('updateField', newField)
    },
  }
}
</script>

